import IntegrationTable, {
	IntegrationTableProps,
} from "@/components/IntegrationTable";
import { ProColumns } from "@ant-design/pro-table";
import React, { useEffect, useState } from "react";
import { useHistory } from "react-router-dom";
import { history, connect } from "umi";
import { Button, Card, Row, Col, Statistic, Tabs, notification } from "antd";
import {
	ordinate,
	communityStatistics,
	regionList,
	regionData,
} from "./service";
import { getArray } from "phinney-toolkit";
import { Map, Marker, Markers, Polygon } from "react-amap";
import styles from "./index.css";
const CommunityList: React.FC<any> = () => {
	//  const history = useHistory()
	// 组件是否已经卸载
	let isUnMounted = false;
	const [ordinateList, setOrdinateList] = useState<any>([]);
	//小区数据
	const [communityDate, setCommunityDate] = useState<any>({});
	//围栏数据
	const [communityPolygon, setCommunityPolygon] = useState<any>([]);
	//经纬度范围  默认为郑州市
	const [centerSize, setcenterSize] = useState<any>([113.689882, 34.758088]);
	// const [centerSize, setcenterSize] = useState<any>([116.471354, 39.994257]);
	const [zoomSize, setZoomSize] = useState<any>(11);

	// 获取组长小区
	const getManager = async () => {
		const res = await regionList({
			pageIndex: 1,
			pageSize: 99,
			parentId: 4101,
		});
		setOrdinateList(getArray(res.data.records));
	};

	let ceshiData: any = [
		{
			id: 1,
			data: [
				[116.403322, 39.920255],
				[116.410703, 39.897555],
				[116.402292, 39.892353],
				[116.389846, 39.891365],
			],
		},
		{
			id: 2,
			data: [
				[116.453322, 39.920255],
				[116.460703, 39.897555],
				[116.452292, 39.892353],
				[116.439846, 39.891365],
			],
		},
	];

	//获取社区列表
	const getCommunityStatistics = async () => {
		const res = await communityStatistics({});
		setCommunityDate({
			todayActiveNum: res?.data.todayActiveNum,
			totalCommunityNum: res?.data.totalCommunityNum,
			totalUserNum: res?.data.totalUserNum,
			yesterdayActiveNum: res?.data.yesterdayActiveNum,
		});
	};

	// 初始化加载数据
	useEffect(() => {
		getManager();
		getCommunityStatistics();
		return () => {
			isUnMounted = true;
		};
	}, []);

	const handeleClick = async (item: any) => {
		const res = await regionData({
			pageIndex: "1",
			pageSize: "99",
			lv: 6,
			parentId: item.regionId,
			businessStatus: 1,
		});
		if (res.data.records) {
			history.push({
				pathname: "/communityMan/communitySendAmap",
				query: {
					id: item.regionId,
				},
			});
		}
	};

	return (
		<div>
			<Card bordered={false} hoverable>
				<div
					className="container"
					id="container"
					style={{ width: "100%", height: 900 }}
				>
					<Map
						version="1.4.4"
						amapkey="10c01e3af3272d167f7ab9880eb137c5"
						zoom={zoomSize}
						useAMapUI
						center={centerSize}
						isHotspot={true}
						// center={[113.688145, 34.795439]}
						plugins={["ToolBar"]}
						resizeEnable={true}
						mapStyle={"amap://styles/6211b93913da10dfdbfd307d2edc004e"}
						// 2389FF
					>
						{ordinateList.map((item: any, index: any) => {
							return (
								<Marker
									key={index}
									events={{
										click: (MapsOption: any, marker: any) => {
											setcenterSize(item.points);
											// setZoomSize(18);
											handeleClick(item);
											// if (!item.specShapeArrays || !item.points) return;
											// setCommunityPolygon(item.specShapeArrays);
											// setcenterSize(item.points);
											// setZoomSize(0);
											// setZoomSize(18);
											// let zoom = 14
											// Map.setPointToCenter(400,400)
										},
									}}
									content={`<div class=${styles.info}>${item.regionName}</div>`}
									useCluster
									position={[Number(item.lon), Number(item.lat)]}
								/>
							);
						})}
						{/* <Marker position={[113.636975, 34.728297]}  (",") />
						<Marker position={[113.661181, 34.726167]} /> */}
					</Map>
				</div>
			</Card>
		</div>
	);
};

export default CommunityList;
